<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定制多选框</title>
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <style>
        body{
            margin: 0;
            padding: 0;
            background-color: #f1f1f1;
            font-family: sans-serif;
        }
        .check{
            position: relative;
            display: block;
            font-size: 28px;
            color:#313131;
            margin-bottom: 10px;
            padding-left: 36px;
            cursor: pointer;
        }
        .check input{
            opacity: 0;
            position: absolute;
        }
        .check span{
            position: absolute;
            left: 0;
            top: 0;
            height: 30px;
            width: 30px;
            background-color: #313131;
            color: white;
            text-align: center;
        }
        .check span:before{
            content: '\f122';
            font-family: Ionicons;
            display: none;
        }
        .check:hover > span{
            opacity: 0.8;
        }
        .check input:checked ~ span{
            background-color: #3498db;
        }
        .check input:checked ~ span:before{
            display: block;
        }
    </style>
</head>
<body>
    <h1>WHAT DO YOU LIKE</h1>
    <label class="check">
        HTML
        <input type="checkbox">
        <span></span>
    </label>
    <label class="check">
        CSS
        <input type="checkbox">
        <span></span>
    </label>
    <label class="check">
        VUE
        <input type="checkbox">
        <span></span>
    </label>
    <label class="check">
        JS
        <input type="checkbox">
        <span></span>
    </label>
</body>
</html>